<script>
import InstitutionSelect from '@/components/institutionSelect/institutionSelect.vue'
import { mapState } from 'vuex'
import { assignedStatusArray, statusArray } from '@/constants/dispatch/pickUp'
import FilterPage from '@/components/FilterPage/FilterPage.vue'

export default {
  name: 'pickUp',
  components: { FilterPage, InstitutionSelect },
  data() {
    return {
      loading: false,
      pageParams: {
        page: 1,
        pageSize: 10,
        taskType: 1,
        assignedStatus: undefined,
        status: undefined,
        agencyId: undefined,
        maxEstimatedEndTime: undefined,
        maxActualEndTime: undefined,
        minEstimatedEndTime: undefined,
        minActualEndTime: undefined
      },
      assignedStatusArray,
      statusArray,
      placeholder: '请选择所属营业部',
      timeArray1: [],
      timeArray2: [],
      dialogVisible: false,
      courierId: '',
      ids: []
    }
  },
  methods: {
    /*
    * 获取取件作业管理的回调函数
    *  */
    async fetchPickUp() {
      try {
        this.loading = true
        await this.$store.dispatch('pickUpStore/fetchPickUpAction', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /*
    *获取快递员分页数据的回调函数
    *  */
    async fetchCourierList() {
      try {
        await this.$store.dispatch('deliverymanStore/fetchCourierListAction', { page: 1, pageSize: 10, agentId: '1024993422324415489' })
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *pageSize发生变化的回调函数
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchPickUp()

    },
    /*
    *page发生变化的回调函数
    *  */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchPickUp()
    },
    /*
    * 筛选
    *  */
    getStatus(status) {
      this.pageParams.page = 1
      this.pageParams.status = status
      this.fetchPickUp()
    },
    /*
    *获取营业部ID
    *  */
    nodeClick({ id, name }) {
      this.pageParams.agencyId = id
      this.placeholder = name
    },
    /*
    * 搜索按钮的回调函数
    *  */
    handleSearch() {
      const [minEstimatedEndTime, maxEstimatedEndTime] = this.timeArray1
      const [minActualEndTime, maxActualEndTime] = this.timeArray2
      Object.assign(this.pageParams, { minEstimatedEndTime, maxEstimatedEndTime, minActualEndTime, maxActualEndTime })
      this.pageParams.page = 1
      this.fetchPickUp()
    },
    /*
    *
    * 点击重置按钮的回调函数
    *  */
    handleReset() {
      this.pageParams = {
        page: 1,
        pageSize: 10,
        taskType: 1,
        id: undefined,
        orderId: undefined,
        assignedStatus: undefined,
        status: undefined,
        agencyId: undefined,
        maxEstimatedEndTime: undefined,
        maxActualEndTime: undefined,
        minEstimatedEndTime: undefined,
        minActualEndTime: undefined
      }
      this.timeArray1 = []
      this.timeArray2 = []
      this.fetchPickUp()
    },
    /*
    *
    * 批量人工分配快递员的回调函数
    *  */
    handleBatchDistribution() {
      if (!this.ids.length) return this.$message.warning('请选择需要分配的作业')
      const every = this.ids.every(item => item.assignedStatus === 2)
      if (every) return this.$message.warning('包含已经分配的取件作业')
      this.dialogVisible = true
    },

    /*
    * 分配快递员的回调函数
    *  */
    handleDistribution(row) {
      if (row.assignedStatus === 2) return this.$message.warning('该取件作业已经分配')
      this.dialogVisible = true
      this.ids.push(row)
    },
    /*
    *确定按钮的回调函数(进行快递员分配)
    *  */
    async distributionDeliverymanSubmit() {
      try {
        const result = await this.$store.dispatch('pickUpStore/distributionDeliverymanAction', { courierId: this.courierId, ids: this.ids.map(item => item.id) })
        this.dialogVisible = false
        this.$message.success(result)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *表格勾选的回调函数
    *  */
    selectChange(selection) {
      this.ids = selection
    },
    /*
    * 格式化任务状态
    *  */
    formatterStatus(row) {
      const MAP = {
        1: '新任务',
        2: '已完成',
        3: '已取消'
      }
      return MAP[row.status]
    }
  },
  computed: {
    ...mapState('pickUpStore', ['counts', 'pickUpList']),
    ...mapState('deliverymanStore', ['courierList'])
  },
  mounted() {
    this.fetchPickUp()
    this.fetchCourierList()
  }
}
</script>

<template>
  <div class="pick-up">
    <el-card class="top" shadow="never">
      <el-form inline label-width="80px">
        <el-form-item label="任务编号:">
          <el-input placeholder="请输入取件任务编号" v-model="pageParams.id"></el-input>
        </el-form-item>
        <el-form-item label="订单编号:">
          <el-input placeholder="请输入订单编号" v-model="pageParams.orderId"></el-input>
        </el-form-item>
        <el-form-item label="营业部:">
          <institution-select :placeholder="placeholder" @nodeClick="nodeClick"></institution-select>
        </el-form-item>
      </el-form>
      <el-form inline label-width="80px">
        <el-form-item label="预计时间:">
          <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="timeArray1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="实际时间:">
          <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="timeArray2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="分配状态:">
          <el-select v-model="pageParams.assignedStatus">
            <el-option v-for="(item) in assignedStatusArray" :value="item.type" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <filter-page :status-list="statusArray" @select="getStatus"></filter-page>
    <el-card class="bottom" shadow="never" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <div class="header">
        <el-button type="primary" icon="el-icon-edit-outline" @click="handleBatchDistribution">批量分配快递员</el-button>
      </div>
      <el-table @selection-change="selectChange" :header-cell-style="{background:'#f4f6f8',color:'#969393'}" :data=pickUpList border stripe>
        <el-table-column type="selection" width="50px" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
        <el-table-column prop="id" label="取件作业编号" align="center" width="170px"></el-table-column>
        <el-table-column prop="agencyName" label="所在营业部" align="center" width="120px"></el-table-column>
        <el-table-column label="任务分配状态" align="center" width="120px">
          <template #default="{row}">{{ row.assignedStatus === 2 ? '已经分配' : '待分配' }}</template>
        </el-table-column>
        <el-table-column label="任务类型" align="center">
          <template #default="{row}">{{ row.taskType === 1 ? '取件任务' : '派件任务' }}</template>
        </el-table-column>
        <el-table-column :formatter="formatterStatus" prop="status" label="任务状态" align="center"></el-table-column>
        <el-table-column label="签收状态" align="center">
          <template #default="{row}">{{ row.signStatus === 1 ? '已签收' : '拒收' }}</template>
        </el-table-column>
        <el-table-column prop="signRecipient" label="签收人" align="center"></el-table-column>
        <el-table-column prop="courierName" label="快递员姓名" align="center" width="100px"></el-table-column>
        <el-table-column prop="estimatedStartTime" label="预计开始时间" align="center" width="160px"></el-table-column>
        <el-table-column prop="estimatedEndTime" label="预计完成时间" align="center" width="160px"></el-table-column>
        <el-table-column prop="actualEndTime" label="实际完成时间" align="center" width="160px"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="150px">
          <template #default="{row}">
            <el-button type="text" @click="handleDistribution(row)">分配快递员</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 15, 20, 25]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" background></el-pagination>
    </el-card>
    <el-dialog title="分配快递员" :visible.sync="dialogVisible">
      <el-form label-width="100px">
        <el-form-item label="快递员">
          <el-select v-model="courierId">
            <el-option v-for="(item) in courierList" :value="item.userId" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="distributionDeliverymanSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.pick-up {
  padding: 20px;

  .top {
    margin-bottom: 10px;

    .el-form-item {
      width: 380px;

      .el-input {
        width: 130%;
      }

      .el-select {
        width: 124%;
      }

      .el-date-editor {
        width: 250px;
      }
    }
  }

  .bottom {
    margin-top: 10px;

    .el-table {
      margin: 10px 0;
    }

    .el-pagination {
      display: flex;
      justify-content: center;
    }
  }

  .el-dialog {
    .el-form {
      width: 100%;
    }

    .el-select {
      width: 80%;
    }
  }
}
</style>
